<template>
  <el-container>
    <el-header style="padding: 0;" class="fixed-header">
      <el-menu 
        mode="horizontal" 
        :default-active="currentRoute"
        router
        class="fixed-menu"
      >
        <el-menu-item index="/scanner">
          <el-icon><Platform /></el-icon>
          扫码
        </el-menu-item>

        <el-menu-item index="/config">
          <el-icon><Setting /></el-icon>
          系统配置
        </el-menu-item>

        <el-menu-item index="/records">
          <el-icon><Document /></el-icon>
          扫码记录
        </el-menu-item>
      </el-menu>
    </el-header>
    
    <el-main class="main-with-fixed-header">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  Platform, 
  Setting, 
  Document
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

const currentRoute = computed(() => route.path)

const navigateTo = async (path: string) => {
  try {
    await router.push(path)
  } catch (error) {
    console.error('Navigation failed:', error)
    ElMessage.error('页面跳转失败')
  }
}
</script>

<style>
@import 'element-plus/dist/index.css';

:root {
  --el-menu-height: 60px;
}

body {
  margin: 0;
  min-height: 100vh;
}

#app {
  min-height: 100vh;
}

.el-container {
  min-height: 100vh;
}

.el-header {
  padding: 0;
  height: auto !important;
}

.el-menu {
  --el-menu-bg-color: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
}

.el-menu-item {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--el-menu-height);
  line-height: var(--el-menu-height);
}

.el-main {
  --el-main-padding: 20px;
  background-color: var(--el-bg-color-page);
}

.el-icon {
  vertical-align: middle;
}

.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--el-bg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fixed-menu {
  width: 100%;
}

.main-with-fixed-header {
  padding-top: calc(var(--el-menu-height) + var(--el-main-padding));
}
</style> 